<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/js/jquery-3.5.1.min.js"></script>
    <script src="/js/popper.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/bootstrap.min.js"></script>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <link rel="stylesheet" href="/css/all.min.css">
    <title>资讯管理</title>
    <style>
       body {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* 苹果系统字体 */
    }
    .content {
        padding: 20px;
    }
       .sidebar {
           min-width: 250px;
           background-color: #343a40;
           color: #f8f9fa; /* 更柔和的字体颜色 */
           height: 100vh;
           padding: 20px;
           transition: background-color 0.3s;
           border-right: 1px solid #495057;
           box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
       }
       .sidebar h2 {
           color: #ffffff;
           font-size: 1.8rem; /* 增加标题字体大小 */
           margin-bottom: 20px;
           font-weight: 600; /* 加粗 */
       }
       .nav-link {
           color: #e0e0e0; /* 更柔和的链接颜色 */
           transition: background-color 0.3s, color 0.3s; /* 添加颜色过渡效果 */
           font-size: 1.1rem;
           padding: 10px 15px;
           border-radius: 5px;
       }
       .nav-link:hover {
           background-color: #495057;
           color: #ffffff; /* 悬停时字体颜色 */
       }
       .nav-link.active {
           background-color: #007bff; /* 选中颜色 */
           color: #ffffff; /* 选中时字体颜色 */
       }
       .content {
           flex-grow: 1;
           padding: 20px;
           padding-bottom: 70px; /* 为底部导航栏留出更多空间 */
       }
       iframe {
           width: 100%;
           height: 100%;
           border: none; /* 移除边框 */
       }
       .custom-modal {
           max-width: 800px; /* 设置更大的最大宽度 */
       }
       .modal-content{
           height: 700px;
       }
       .pagination {
           display: flex;
           justify-content: center; /* 居中对齐 */
           padding: 10px 0; /* 上下内边距 */
           list-style: none; /* 移除默认列表样式 */
       }

       .pagination li {
           margin: 0 5px; /* 每个分页项之间的间距 */
       }

       .pagination a, .pagination span {
           display: inline-block;
           padding: 8px 12px; /* 内边距 */
           border: 1px solid #007bff; /* 边框颜色 */
           border-radius: 4px; /* 圆角 */
           color: #007bff; /* 链接颜色 */
           text-decoration: none; /* 移除下划线 */
           transition: background-color 0.3s, color 0.3s; /* 过渡效果 */
       }

       .pagination a:hover {
           background-color: #007bff; /* 悬停时背景颜色 */
           color: #ffffff; /* 悬停时字体颜色 */
       }

       .pagination .active span {
           background-color: #007bff; /* 当前页的背景颜色 */
           color: #ffffff; /* 当前页的字体颜色 */
           border: 1px solid #007bff; /* 边框颜色 */
       }

       .pagination .disabled span {
           color: #6c757d; /* 禁用状态的字体颜色 */
           border: 1px solid #6c757d; /* 禁用状态的边框颜色 */
           cursor: not-allowed; /* 禁用状态的光标样式 */
       }

       .popup {
           display: none; /* 隐藏弹窗 */
           position: fixed;
           z-index: 1000;
           left: 0;
           top: 0;
           width: 100%;
           height: 100%;
           background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
       }
       .popup-content {
           background-color: #ffffff;
           margin: 15% auto;
           padding: 20px;
           border: 1px solid #888;
           width: 80%; /* 宽度 */
           max-width: 600px;
           border-radius: 5px;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
       }
       .close {
           color: #aaa;
           float: right;
           font-size: 28px;
           font-weight: bold;
       }
       .close:hover,
       .close:focus {
           color: black;
           text-decoration: none;
           cursor: pointer;
       }
    </style>
</head>
<body>
    <div class="content">
        <h2>资讯列表</h2>
        <button class="btn btn-primary mb-3" onclick="openAddNewsIframe()">添加资讯</button>
        <div class="form-row mb-1">
            <form method="get" action="">
                <div class="form-row mb-3">
                    <div class="col-auto">
                        <input class="form-control form-control-sm" id="searchInput" placeholder="文章标题" name="title" value="{$data.title ?? ''}" type="text">
                    </div>
                    <div class="col-auto">
                        <input type="submit" class="form-control form-control-sm btn btn-primary"   placeholder="搜索" value="搜索" >
                    </div>
                </div>
            </form>
        </div>
        <div id="iframeContainer" style="display:none; position: fixed; top: 20%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; background: white; border: 1px solid #ccc; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);">
            <button class="btn btn-danger" style="position: absolute; top: 10px; right: 10px;" onclick="closeAddNewsIframe()">
                <i class="fas fa-times"></i>
            </button>
            <iframe id="addNewsIframe" style="width: 780px; height: 600px; border: none;"></iframe>
        </div>


        <table class="table">
            <thead>
                <tr>
                    <th>
                        <input type="submit" value="选择" id="selectAll" class="btn btn-danger">
                        <input  type="submit" value="删除" id="deletePost" class="btn btn-danger">
                    </th>
                    <th>ID</th>
                    <th>标题</th>
                    <th>创建时间</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="newsTableBody">
            {volist name="list" id="vo"}
                <tr>
                    <td><input  class="item-checkbox" type="checkbox" name="id[]" value="{$vo.id}"></td>
                    <td>{$vo.id}</td>
                    <td>{$vo.title}</td>
                    <td>{$vo.create_time}</td>
                    <td>{$vo.update_time}</td>
                    <td>
                        <button class="btn btn-warning btn-sm" onclick="openEditNewsIframe('{$vo.id}')">编辑</button>
                        <button class="btn btn-danger btn-sm" onclick="deleteNews('{$vo.id}')">删除</button>
                    </td>
                </tr>
                {/volist}
            </tbody>
        </table>
        <nav>
            <ul class="pagination">
                {$list|raw}
                <b style="margin-top: 20px;margin-left: 10px;">总数：{$list->total()}</b>
            </ul>
        </nav>
    </div>

    <script>
      function closeAddNewsIframe() {
            const iframe = document.getElementById('addNewsIframe');
            iframe.style.display = 'none';
            document.getElementById('iframeContainer').style.display = 'none';
            // 刷新父页面的列表
            // window.parent.location.reload();
            // 关闭 iframe
                                   location.reload();

            // window.parent.closeAddNewsIframe();
        }
        $('#selectAll').click(function () {
            var btnText = $(this).val();
            if (btnText === '全选') {
                // 全选操作
                $('.item-checkbox').prop('checked', true);
                $(this).val('反选');
            } else {
                // 反选操作
                $('.item-checkbox').each(function () {
                    $(this).prop('checked', !$(this).prop('checked'));
                });
                $(this).val('全选');
            }
        });
        $("#deletePost").click(function (){
            var selected = [];
            // 遍历所有选中的复选框
            $('.item-checkbox:checked').each(function () {
                // 将选中复选框的值添加到数组中
                selected.push($(this).val());
            });
            let getIds = selected.join(', ')
            if (getIds === ""){
                layer.msg("暂未选择")
            }
            $.ajax({
                url: '/admins/news/in_delete',
                type: 'POST',
                data: {
                    ids: getIds
                },
                success: function(response) {
                    if (response.code === 0) {
                        layer.msg("删除成功", {icon: 1, shade: 0.5});

                        setTimeout(function() {
                            // 刷新父页面的列表
                       location.reload();
                            // 关闭 iframe
                            // window.parent.closeAddNewsIframe();
                        }, 1000);
                    }
                },
            });
        })
        function deleteNews(id){
            $.ajax({
                url: '/admins/news/delete',
                type: 'POST',
                data: {
                    id: id
                },
                success: function(response) {
                    if (response.code === 0) {
                        // 刷新父页面的列表
                       location.reload();
                        // 关闭 iframe
                        // window.parent.closeAddNewsIframe();
                    }
                },
            });
        }

        function openEditNewsIframe(id) {
            const iframe = document.getElementById('addNewsIframe');
            iframe.style.display = 'block';
            iframe.src = '/admins/news/edit?id='+id; // 替换为你的添加资讯表单页面路径
            document.getElementById('iframeContainer').style.display = 'block';
        }

        function openAddNewsIframe() {
            const iframe = document.getElementById('addNewsIframe');
            iframe.style.display = 'block';
            iframe.src = '/admins/news/add'; // 替换为你的添加资讯表单页面路径
            document.getElementById('iframeContainer').style.display = 'block';
        }

 
    </script>

</body>

</html>